<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-04-19 19:37
  *@LastEditTime 2020-04-19 19:37
  *@LastEdititors
-->
<template>
    <div id="fansList">
      <Tittle :title="'粉丝列表'"></Tittle>
      <div :style="{height: $inerHeight+55+'px'}">
        <cube-scroll :data="fansData" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp" ref="scroll">
          <template v-for="(data,index) in fansData">
            <div class="info border-bottom-1px" :key="index">
              <div  class="img">
                <img  :src="data.avatarUrl" alt="">
              </div>
              <div  class="name-sign">
                <div >
                  <span  class="name">{{data.name}}</span>
                  <span class="iconfont" :class="data.sex === 1 ? 'iconnanxing':'sex iconnvxing'"></span>
                </div>
                <div class="sign">{{data.sign}}</div>
              </div>
              <div class="yichu-btn">
                移除粉丝
              </div>
            </div>
          </template>
        </cube-scroll>
      </div>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
import {PullDownRefreshAndPullUpLoad} from '../../common/js/mixins'
export default {
  name: 'FansList',
  mixins: [PullDownRefreshAndPullUpLoad],
  components: {
    Tittle
  },
  data () {
    return {
      fansData: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page
      }
      this.apis.getFans(params).then(res => {
        if (res.code === 200) {
          this.fansData = res.data
        }
      })
    },
    onPullingDown () {
      this.page = 1
      this.getData()
    },
    onPullingUp () {
      this.page++
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page
      }
      this.apis.getFans(params).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.$refs.scroll.forceUpdate()
          } else {
            this.fansData = this.fansData.concat(res.data)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../../node_modules/stylus-px2rem"
  #fansList
  {
    .info
    {
      width: 100%
      display flex
      padding 2px;
      position relative
      align-items: center;
      .img{
        align-self  flex-start
        width 22px
        height: 22px
        img{
          width: 100%
          height: 100%
          border-radius 50%;
        }
      }
      .name-sign
      {
        width 50%
        margin 0px 5px
        div
        {
          text-align left;
          height:12px;
          line-height 12px;
        }
        .name {margin-right:5px;color:black;font-weight bolder}
        .sex{color:#ff74a3}
        .sign
        {
          width 100%
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          color #999
        }
      }
      .yichu-btn
      {
        width 30px
        line-height 12px;
        font-size:5px;
        position absolute
        border 1px solid deeppink
        right:10px;
        color:deeppink
        border-radius 2px
        top: 50%
        transform translateY(-50%)
      }
    }
  }
</style>
